<template>
	<div class="body">
		<div class="pic">
			<div class="picture"><img :src="`http://127.0.0.1/api/public/showimg/${user.pic}`"></img></div>
			<div class="in">
				<div>
					<input placeholder="类型-整数" v-model="user.type" />
				</div>
				<div>
					<input placeholder="优先级-整数" v-model="user.hot" />
				</div>
				<div style="margin-top: 20%;">
					
				</div>

				<div>
					<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="user.memo">
					</el-input>

				</div>
			</div>
		</div>
		<div>
			图片:<input type="file" ref="imgs" id="pic">
			<hr>
			<button v-on:click="update()">点击这里更新图片</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'update',
		data() {
			return {
				user: {
					type: '',
					memo:'',
					id:'',
					pic:'',
				},
			}
		},
		methods: {
			update() {
				let fd = new FormData();
				let content = this.$refs.imgs.files[0];
				fd.append("pic", content);
				fd.append("id", this.user.id)
				fd.append("hot",this.user.hot)
				fd.append("type",this.user.type)
				fd.append("memo",this.user.memo)
				console.log(fd);
				this.$postf("/api/adm/hot/add", fd).then((resp) => {
					console.log(resp.data.data);
					this.user.pic = resp.data.data

				})
			}
		},
		mounted() {
			console.log(this.$route)
			this.user = this.$route.query;
			console.log(this.user)
		}
	}
</script>

<style>
	.body {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.picture {
		width: 50%;
	}

	.pic {
		display: flex;
	}

	.in {
		width: 50%;
	}

	.in input {
		width: 100%;
		height: 40%;
		margin-top: 10%;
	}

	.pic img {
		width: 60%;
	}
</style>
